@use "@/assets/style/sea-viewport";

#page_login {

    background-color: #f0f0f0f0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center bottom;

    &.bg-day {
        background-image: url("/static/img/day2.jpg");

        #container_loginbox {

            @media (min-width: sea-viewport.$phone_min) {
                margin-left: 20vw;
            }
        }
    }

    &.bg-afternoon {
        background-image: url("/static/img/afternoon.jpg");

        #container_loginbox {
            @media (min-width: sea-viewport.$phone_min) {
                margin-left: 30vw;
            }


        }
    }

    &.bg-twilight {
        background-image: url("/static/img/twilight.jpg");

        #container_loginbox {

            @media (min-width: sea-viewport.$phone_min) {
                margin-left: 20vw;
            }
        }
    }

    &.bg-night {
        background-image: url("/static/img/night.jpg")
    }


}